<template>
<div>
    <div class="header" @click="showoper">
        <div class="header-img"><img class="img" src="http://img1.qunarzz.com/piao/fusion/1802/51/e78f936a5b404102.jpg_640x200_c14f0b3a.jpg"/></div>
        <div class="header-tite">北京好风光，经在北京，来吧</div>
        <div class="header-prise"><span class="iconfont header-prise-icon">&#xe608;</span>39</div>
    </div>
    <commongallary :list='list' v-show='show' @closerswiper='closer2'></commongallary>
</div>
</template>
<script>
import commongallary from '../../../common/gallary/gallary'
export default {
  name: 'DetailHeader',
  data () {
    return {
      show: false,
      list: ['http://img1.qunarzz.com/piao/fusion/1802/51/e78f936a5b404102.jpg_640x200_c14f0b3a.jpg', 'http://img1.qunarzz.com/piao/fusion/1802/51/e78f936a5b404102.jpg_640x200_c14f0b3a.jpg']
    }
  },
  components: {
    commongallary
  },
  methods: {
    showoper () {
      this.show = true
    },
    closer2 (e) {
      this.show = e
    }
  }
}
</script>

<style lang="stylus" scoped>
  .header
   position: relative
   .header-img
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 31.25%
    background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
    .img
     width: 100%
   .header-tite
    position: absolute
    left: 0
    right: 0
    bottom: 0
    height: .4rem
    line-height: .4rem
    font-size: .28rem
    font-weight: bold
    color: #ffffff
    padding-left: .2rem
    padding-bottom: .1rem
   .header-prise
    position: absolute
    left: 6rem
    right: 0
    bottom: 0
    height: .4rem
    padding-bottom: .1rem
    line-height: .5rem
    color: #ffffff
    background: rgba(6,6,6,0.5)
    .header-prise-icon
     padding: 0 .1rem
</style>
